<template>
  <div class="b_box">
    <h2>妙缘轩后台管理</h2>
    <div class="left">
    </div>
    <div class="right">
      <div class="s_box">
        <h3 style="text-align: center;margin-bottom: 50px;font-size: 24px;font-weight: 400;margin-left: -60px;">管理员{{
          btnText }}</h3>
        <el-form ref="dataRef" :model="dataform" :rules="rules">
          <div class="icon"
            style="width: 80px; height: 42px; float: left;background-color: #8EAFFA;line-height: 42px;text-align: center;color: #fff;margin-right: 15px;">
            <span class="iconfont icon-zhanghu" style="font-size: 22px !important;"></span>
          </div>
          <el-form-item class="form-item" prop="name" style="height: 40px;margin-bottom: 45px;">
            <el-input style="height: 40px;width: 300px;" placeholder="请输入用户名称" v-model="dataform.name" />
          </el-form-item>
          <div class="icon"
            style="width: 80px; height: 42px; float: left;background-color: #8EAFFA;line-height: 42px;text-align: center;color: #fff;margin-right: 15px;">
            <span class="iconfont icon-mima" style="font-size: 22px !important;"></span>
          </div>
          <el-form-item class="form-item" style="height: 40px;margin-bottom: 45px;" prop="password">
            <el-input type="password" style="height: 40px;width: 300px;" placeholder="请输入登录密码" v-model="dataform.password"
              ref="passinput">
              <template v-slot:suffix>
                <i v-show="show" @click="searchChangea"><el-icon size="20px" style="margin-top: 10px;">
                    <View />
                  </el-icon> </i>
                <i v-show="!show" @click="searchChangea"><el-icon size="20px" style="margin-top: 10px;">
                    <Hide />
                  </el-icon> </i>
              </template>
            </el-input>
          </el-form-item>
          <div v-if="bool">
            <div class="icon"
              style="width: 80px; height: 42px; float: left;background-color: #8EAFFA;line-height: 42px;text-align: center;color: #fff;margin-right: 15px;">
              <span class="iconfont icon-mima" style="font-size: 22px !important;"></span>
            </div>
            <el-form-item class="form-item" style="height: 40px;margin-bottom: 45px;">
              <el-input style="height: 40px;width: 300px;" placeholder="请再次输入登录密码" v-model="dbpassword" type="password"
                ref="passwordinput">
                <template v-slot:suffix>
                  <i v-show="showed" @click="searchChangeb"><el-icon size="20px" style="margin-top: 10px;">
                      <View />
                    </el-icon> </i>
                  <i v-show="!showed" @click="searchChangeb"><el-icon size="20px" style="margin-top: 10px;">
                      <Hide />
                    </el-icon> </i>
                </template>
              </el-input>
              <span style="color: rgb(345,108,108);margin-top: -5px;font-size: 12px;" v-if="txtbool">{{ dbpassText
              }}</span>
            </el-form-item>

          </div>
        </el-form>
        <button class="btn" @click="clickHandler">{{ btnText }}</button>
        <div class="foot">
          <span @click="register">{{ regText }}</span>
          <span @click="forget">忘记密码？</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { View, Hide } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue';
import { addUserApi, getPassApi } from '../../api/roomApi'
import useUserStore from '../../store/common'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const btnText = ref('登录')
    const regText = ref('管理员注册')
    const dbpassText = ref('请再次输入密码')
    const dataform = reactive({
      name: '管理员',
      password: 'admin666'
    })
    const dbpassword = ref('')
    const dataRef = ref(null)
    const passinput = ref(null)
    const passwordinput = ref(null)
    const router = useRouter()
    const userStore = useUserStore()
    let bool = ref(false)
    let txtbool = ref(false)
    const register = () => {
      bool.value = !bool.value
      bool.value == true ? regText.value = '返回登录' : regText.value = '管理员注册'
      bool.value == true ? btnText.value = '注册' : btnText.value = '登录'
    }
    const rules = {
      name: [
        {
          required: true,
          message: '请输入用户名称',
          trigger: 'blur'
        },
        {
          pattern: /^[\u4E00-\u9FA5]+$/,
          message: '请输入中文用户名称',
          trigger: 'blur'
        }
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        {
          pattern: /.{6,}/,
          message: '请输入最少6位字符',
          trigger: 'blur'
        }
      ],
    }
    const forget = () => {
      bool.value = true
      bool.value == true ? regText.value = '返回登录' : regText.value = '管理员注册'
      bool.value == true ? btnText.value = '重置密码' : btnText.value = '登录'
    }
    let show = ref(false)
    let showed = ref(false)
    const searchChange = (a,b) => {
      a.value = !a.value
      b.value.input.type = a.value === true ? 'text' : 'password'
    }
    const searchChangea=()=>{
      searchChange(show,passinput)
    }
    const searchChangeb=()=>{
      console.log(passwordinput)
      searchChange(showed,passwordinput)
    }
    const clickHandler = () => {
      dataRef.value.validate(async (allRight) => {
        if (allRight) {
          if (btnText.value == '登录') {
            let res = await getPassApi(dataform)
            if (res.code == 1) {
              dataform.password = ''
              dataform.name = ''
              userStore.setUser(res.data)
              router.replace('/index')
              ElMessage({
                type: 'success',
                message: '登录成功'
              })
            } else {
              ElMessage({
                type: 'error',
                message: '登录失败'
              })
            }
          } else {
            if (!dbpassword.value) {
              txtbool.value = true
              dbpassText.value = '请再次输入密码'
              return
            }
            if (dataform.password == dbpassword.value) {
              txtbool.value = false
              let res = await addUserApi(dataform)
              if (res.ok == 1) {
                dataform.password = ''
                dataform.name = ''
                dbpassword.value = ''
                bool.value = false
                btnText.value = '登录'
                ElMessage({
                  type: 'success',
                  message: '注册成功'
                })
              } else {
                ElMessage({
                  type: 'error',
                  message: '注册失败'
                })
              }
            } else {
              dbpassText.value = '两次密码不一致，请重新输入'
              txtbool.value = true
            }
          }
        }
      })
    }
    return {
      btnText,
      bool,
      regText,
      dataform,
      dbpassword,
      rules,
      txtbool,
      dbpassText,
      dataRef,
      passwordinput,
      View,
      Hide,
      show,
      showed,
      passinput,
      register,
      forget,
      clickHandler,
      searchChangea,
      searchChangeb
    }
  }
}
</script>

<style lang="scss" scoped>
.b_box {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: -8px;
  position: relative;
  overflow: hidden;
}

.left {
  width: 33vw;
  height: 0;
  border-top: 100vh solid #8EAFFA;
  border-right: 200px solid transparent;
  float: left;
}

h2 {
  position: absolute;
  top: 120px;
  left: 110px;
  font-size: 40px;
  color: #FFF;
  letter-spacing: 12px;
}

.right {
  width: 53vw;
  float: left;
  height: 100vh;
  position: relative;

  .s_box {
    width: 450px;
    height: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.btn {
  width: 245px;
  height: 50px;
  background-color: #8EAFFA;
  border: none;
  margin-left: 100px;
  margin-bottom: 60px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  color: #FFF;
  font-size: 25px;
  font-weight: 500;
  padding-left: 15px;
  letter-spacing: 15px;
  cursor: pointer;
}

.foot {
  margin-top: -20px;
  width: 100%;
  text-align: center;

  span {
    color: #999999;
    font-size: 14px;
    margin: 0 40px;
    cursor: pointer;
  }
}

i {
  cursor: pointer;
}</style>